<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="UTF-8">
    <title>中小学校营养餐数据可视化大屏</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
    <style>
        body {
            background: #12273c;
        }
        .title-row {
            color: #ffffff;
            height: 90px;
        }
        .time-title {
            padding: 15px;
            font-size: 14px;
            margin-left: -15px;
        }
        .main-title{
            font-size: 34px;
            font-weight: bold;
            text-align: center;
            height: 80px;
            line-height: 80px;

            background: #233d62;

            box-shadow: 4px 2px 6px #233d62,
                        -4px 2px 6px #233d62,
                        4px -2px 6px #233d62,
                        -4px -2px 6px #233d62;
        }
        .time-range{
            float: right;
        }
        .time-range a {
            display: block;
            float: left;
            color: #ffffff;
            width: 55px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            background-color: #4d79d2;
        }
        .time-range a.active{
            background-color: #edc74a;
        }

        .box {
        }
        .box-inner {
            margin: 10px;
        }
        .box-content{
        }

        .box-button {
            position: absolute;
            right: 30px;
            margin-top: -30px;
        }
        .pre_button,.next_button{
            height: 20px;
            cursor: pointer;
        }
        .pre_button {
        }
        .next_button {
        }

        .box-content  h3 {
            background: url("/img/datav/bor.png") no-repeat center;
            text-align: center;
            font-size: 22px;
            color: #5ea7dc;
            height: 54px;
            line-height: 54px;

            margin: 10px 10px 10px 20px;
        }

        .summary {
            margin:35px 50px 50px 50px;
        }
        .summary-item {
            float: left;
            width: 25%;
            text-align: left;
        }
        .summary-title {
            font-size: 18px;
            color: #ffffff;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .summary-number {
            margin-top: 15px;
            font-size: 32px;
            color: #f6c044;
        }

        table {
            width: 100%;
            color: #ffffff;
        }
        table th{
            text-align: center;
            font-size: 12px;
            font-weight: normal;
            padding: 6px 5px;
            color: #5ea7dc;

            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        table td{
            text-align: center;
            font-size: 12px;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
        }

        table tr:nth-child(even) td {
        }

        table tr:nth-child(odd) td {
            background: #2f4459;
        }
        .table-title{
            text-align: left;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;

            color: #4bc2d6;
        }
        .box-content div{
            padding-bottom: 1rem;
        }

        .anchorBL{
            display:none;  //去除百度地图的版权栏
        }
        /*.BMap_noprint{*/
            /*display:none;  //去除右上角的地图按钮*/
        /*}*/

        /* 大型屏幕(桌面) */
        @media screen and (min-width: 1900px) {
            body {
            }
            .summary {
                margin:35px 80px 50px 80px;
            }
            .summary-item {
            }
            .summary-title {
                font-size: 24px;
            }
            .summary-number {
                margin-top: 20px;
                font-size: 48px;
            }

            /*.title-row{*/
                /*margin-bottom: 40px;*/
            /*}*/
            /*.box {*/
                /*margin-bottom: 20px;*/
            /*}*/
        }

        /* 小屏型幕(桌面) */
        @media screen and (max-height: 768px) and (min-height: 600px) and (min-width: 768px){
            .title-row{
                height: 55px;
            }
            .main-title{
                font-size: 22px;
                height: 50px;
                line-height: 50px;
            }
            .box-content  h3 {
                font-size: 13px;
                height: 32px;
                line-height: 32px;
                background-size: contain;
            }
            /*用一个无滚动条的div包裹另一个有滚动条的div*/
            #cptj-box {
                height: 180px;
                overflow: hidden;
                width: 100%;
            }
            #cptj-box .box-inner{
                height: 100%;
                margin-right: -18px;
                overflow-y: auto;
                overflow-x: hidden;
            }
        }

        /* 超小屏幕(手机) */
        @media screen and (max-width: 768px) {
            .title-row{
            }
            .time-title {
                display: none;
            }
            .main-title{
                font-size: 20px;
                height: 60px;
                line-height: 60px;

                box-shadow:none;
            }
            .time-range{
                margin: 0 0 0 0;
            }
            .time-range a {
            }
            .summary {
                margin:20px 10px 20px 10px;
            }
            .summary-item {
                width: 33%;
                text-align: center;
            }
            .summary-title {
                font-size: 16px;
            }
            .summary-number {
                margin-top: 15px;
                font-size: 20px;
            }
        }

    </style>
    <script th:src="@{/echarts/echarts.js}" type="text/javascript"></script>
    <script th:src="@{/echarts/dark.js}" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script th:src="@{/js/jquery.SuperSlide.js}" type="text/javascript"></script>

    <script th:src="@{/echarts/bmap.js}" type="text/javascript"></script>
    <script th:src="@{/echarts/china.js}" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0UqXGL98FSmi22w2Rl6HK56I"></script>
</head>
<body>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<div class="layui-fluid" style="padding: 0">
    <div class="layui-row title-row">

        <div class="layui-col-xs12 layui-col-md3">
            <div class="time-title">
                <!--2017-12-08 18:23:56-->
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <h1 class="main-title">诸暨市中小学校营养餐数据可视化大屏</h1>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="time-range">
                <a href="javascript:;" rel="default" th:classappend="${type} == 'default' ? 'active' : ''">默认</a>
                <a href="javascript:;" rel="today"  th:classappend="${type} == 'today' ? 'active' : ''">今日</a>
                <a href="javascript:;" rel="thisMonth" th:classappend="${type} == 'thisMonth' ? 'active' : ''">本月</a>
                <a href="javascript:;" rel="thisYear" th:classappend="${type} == 'thisYear' ? 'active' : ''">今年</a>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md3">
            <div class="box">
                <div class="box-inner">
                    <div class="box-content">
                        <h3>食材结构</h3>
                        <input id="statMaterialStructure_currentPage" type="hidden" value="1">
                        <input id="statMaterialStructure_totalPage" type="hidden" th:value="${statMaterialStructure_total}">
                        <div class="box-button">
                            <img class="pre_button" style="display: none;" src="/img/datav/pre_page.png" value="上一页" onclick="statMaterialStructure_pre(this)"/>
                            <img class="next_button" src="/img/datav/next_page.png" value="下一页" onclick="statMaterialStructure_next(this)"/>
                        </div>
                        <div id="scjgChart" style="width: 98%;height:230px;margin-top: 10px;"></div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-inner">
                    <div class="box-content">
                        <h3>价格趋势</h3>
                        <div id="jgqsChart" style="width: 98%;height:210px;margin-top: 10px;"></div>
                    </div>
                </div>
            </div>
            <div class="box" id="cptj-box">
                <div class="box-inner">
                    <div class="box-content">
                        <h3 id="recommendMenu_title">菜谱推荐</h3>
                        <div style="height: 175px; overflow: hidden;">
                        <table id="recommendMenu_table">
                            <tr>
                                <th>菜名</th>
                                <th>蛋白质</th>
                                <th>脂肪</th>
                                <th>糖</th>
                                <th>膳食纤维</th>
                                <th>微量元素</th>
                            </tr>
                            <tr th:each="recommendMenu : ${recommendMenus}">
                                <td class="table-title" th:text="${recommendMenu.name}" style="min-width: 60px;"></td>
                                <td th:text="${recommendMenu.protein}"></td>
                                <td th:text="${recommendMenu.fat}"></td>
                                <td th:text="${recommendMenu.sugar}"></td>
                                <td th:text="${recommendMenu.dietaryFiber}"></td>
                                <td th:text="${recommendMenu.traceElement}"></td>
                            </tr>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="summary-slide">
                <div class="summary">
                    <ul style="left: 0px; position: relative; overflow: hidden;">
                        <li class="summary-item">
                            <div class="summary-title">学校数量</div>
                            <div class="summary-number" th:text="${countSchool}"></div>
                        </li>
                        <li class="summary-item">
                            <div class="summary-title">菜品种类</div>
                            <div class="summary-number" th:text="${countBom}"></div>
                        </li>
                        <li class="summary-item">
                            <div class="summary-title">食材抽检合格率</div>
                            <div class="summary-number">100%</div>
                        </li>
                        <li class="summary-item">
                            <div class="summary-title">本周学校满意度</div>
                            <div class="summary-number">98%</div>
                        </li>
                        <li class="summary-item">
                            <div class="summary-title">食材种类</div>
                            <div class="summary-number" th:text="${countMaterial}"></div>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="dituChart" style="width: 100%;height:720px; border: 0;background: #ffffff;">

            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="box">
                <div class="box-inner">
                    <div class="box-content">
                        <h3>营养摄入对比</h3>
                        <div id="yysrdbChart" style="width: 98%;height:350px;"></div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="box-inner">
                    <div class="box-content">
                        <h3>营养摄入分析</h3>
                        <input id="statNutritionAnalysis_currentPage" type="hidden" value="1">
                        <input id="statNutritionAnalysis_totalPage" type="hidden" th:value="${statNutritionAnalysis_total}">
                        <div class="box-button">
                            <img class="pre_button" style="display: none;" src="/img/datav/pre_page.png" value="上一页" onclick="statNutritionAnalysis_pre(this)"/>
                            <img class="next_button" src="/img/datav/next_page.png" value="下一页" onclick="statNutritionAnalysis_next(this)"/>
                        </div>
                        <div id="yysrfxChart" style="width: 98%;height:370px;margin-top: 10px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>/*<![CDATA[*/
var theme = "dark";
var browser = {
    versions: function() {
        var u = navigator.userAgent,
            app = navigator.appVersion;
        return {
            mobile: !!u.match(/AppleWebKit.*Mobile.*/),
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1,
            iPhone: u.indexOf("iPhone") > -1,
            iPad: u.indexOf("iPad") > -1
        };
    } (),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
};

var scjgChart;
var yysrfxChart;

$(function () {
    var summarySlideVis = 4;
    if(browser.versions.mobile) {
        $("#summary-slide").insertAfter($(".title-row"));
        summarySlideVis = 3;
    }
    else { //自适应
        var screenHeight = $(window).height();

        if(screenHeight >= 600) {
            var mainTitleHeight = $(".title-row").height();
            var titleHeight = $("#cptj-box h3").height();
            var cptjHeight = $("#cptj-box").height();
            var summaryHeight = $("#summary-slide").height();

            var leftChartHeight = (screenHeight - mainTitleHeight - titleHeight * 2 - 95 - cptjHeight) / 2;
            $("#scjgChart").height(leftChartHeight);
            $("#jgqsChart").height(leftChartHeight);

            var rightChartHeight = (screenHeight - mainTitleHeight - titleHeight * 2 - 85) / 2;

            $("#yysrdbChart").height(rightChartHeight);
            $("#yysrfxChart").height(rightChartHeight);

            var centerHeight = screenHeight - mainTitleHeight - summaryHeight - 15;
            $("#dituChart").height(centerHeight);
        }
    }

    jQuery("#summary-slide").slide({mainCell: ".summary ul", autoPage: true, effect: "left", autoPlay: true, vis: summarySlideVis});

    //时间范围切换
    $(".time-range a").click(function () {
        var $this = $(this);
        window.location.href = "/datav?type=" + ($this.attr("rel"));
    });

    scjgChart = echarts.init(document.getElementById('scjgChart'), theme);
    yysrfxChart = echarts.init(document.getElementById('yysrfxChart'), theme);

    //食材结构
    initScjgChart(1);

    //营养摄入对比
    $.ajax({
        url: '/datav/statNutritionCompareList?type=[[${type}]]',
        type: "GET",
        success: function (reply) {
            initYysrdbChart(reply);
        }
    });

    //营养摄入分析
    initYysrfxChart(1);

    //价格趋势
    $.ajax({
        url: '/datav/statMaterialPriceList?type=[[${type}]]',
        type: "GET",
        success: function (reply) {
            initJgqsChart(reply);
        }
    });

    //配送地图
    $.ajax({
        url: '/datav/shippingMap?type=[[${type}]]',
        type: "GET",
        success: function (reply) {
            initPeisongMap(reply);
        }
    });

    function initJgqsChart(reply) {
        var dataOnArray = [];
        var porkArray = [];
        var cornArray = [];
        var romaineLettuceArray = [];
        var riceArray = [];
        $.each(reply, function () {
            var obj = $(this)[0];
            dataOnArray.push(obj.dataOnStr);
            porkArray.push(obj.pork);
            cornArray.push(obj.corn);
            romaineLettuceArray.push(obj.romaineLettuce);
            riceArray.push(obj.rice);
        });

        var jgqsOption = {
            title: {
                text: '价格趋势',
                left: 'center',
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                y: 'bottom',
                data: ['猪肉', '玉米', '生菜', '大米']
            },
            grid: {
                left: '6%',
                right: '8%',
                bottom: '15%',
                top: '5%',
                containLabel: true
            },
            toolbox: {},
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dataOnArray
            },
            yAxis: [{
                type: 'value',
                name: "单位（元）",
                nameLocation : 'middle',
                nameGap : 25
            }],
            series: [
                {
                    name: '猪肉',
                    type: 'line',
                    stack: '猪肉',
                    data: porkArray
                },
                {
                    name: '玉米',
                    type: 'line',
                    stack: '玉米',
                    data: cornArray
                },
                {
                    name: '生菜',
                    type: 'line',
                    stack: '生菜',
                    data: romaineLettuceArray
                },
                {
                    name: '大米',
                    type: 'line',
                    stack: '大米',
                    data: riceArray
                }
            ]
        };
        var jgqsChart = echarts.init(document.getElementById('jgqsChart'), theme);
        jgqsChart.setOption(jgqsOption);
    }

    function initYysrdbChart(reply) {
        var yysrdbOption = {
            title: {
                text: '营养摄入对比',
                left: 'center',
                textStyle: {},
                show: false
            },
            tooltip: {},
            legend: {
                y: 'bottom',
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
                data: ['人均摄入量', '标准摄入量']
            },
            radar: {
                shape: 'circle',
                radius: '60%',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                splitArea : {
                    show : true,
                    areaStyle : {
                        color: ["transparent"]  // 图表背景网格的颜色
                    }
                },
                splitLine : {
                    show : true,
                    lineStyle : {
                        type:'dotted',
                        color : '#30455a' // 图表背景网格线的颜色
                    }
                },
                indicator: [
                    {name: '蛋白质', max: 6500},
                    {name: '脂肪', max: 10000},
                    {name: '糖', max: 300},
                    {name: '膳食纤维', max: 8000},
                    {name: '微量元素', max: 10}
                ]
            },
            series: [{
                name: '人均摄入量 vs 标准摄入量',
                type: 'radar',
                data: [
                    {
                        value: reply.avgArray,
                        name: '人均摄入量'
                    },
                    {
                        value: [3600, 5000, 150, 6000, 3],
                        name: '标准摄入量'
                    }
                ]
            }]
        };
        var yysrdbChart = echarts.init(document.getElementById('yysrdbChart'), theme);
        yysrdbChart.setOption(yysrdbOption);
    }

    /**初始化后台地图数据*/
    function initPeisongMap(reply) {
        var dituChart = echarts.init(document.getElementById('dituChart'));

        var geoArray = [];
        $.each(reply.geoCoordList, function () {
            var obj = $(this)[0];
            var coordArray = [];
            coordArray.push(obj.xaxis, obj.yaxis);
            if (obj.name == '配送站') {
                geoArray.push({
                    name: '',
                    value: [obj.xaxis, obj.yaxis],
                    symbolSize: 3 + obj.value / 10,
                    itemStyle: {"normal": {"color": "#FC6D2C"}}
                });
            } else {
                geoArray.push({
                    name: obj.name,
                    value: [obj.xaxis, obj.yaxis],
                    symbolSize: 3 + obj.value / 10
                });
            }
        });

        var peiSongData = [];
        $.each(reply.shippingLinesList, function () {
            var obj = $(this)[0];
            var fromArray = [obj.fromX, obj.fromY];
            var destArray = [obj.destX, obj.destY];
            peiSongData.push({
                fromName: obj.fromName,
                toName: obj.destName,
                coords: [fromArray, destArray]
            });
        });

        var series = [];
        var list = [];
        list.push(['配送站', peiSongData]);
        var colors = ['#2af131', '#fc6d2c', '#f8cc31'];
        list.forEach(function (item, i) {
            series.push(
                {
                    name: item[1],
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    zlevel: 2,
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}',
                            textStyle: {
                                fontSize: 14
                            }
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (obj) {
                            var shtml = '';
                            shtml += '<div style="font-size: 12px; height: 26px;">';
                            shtml += obj.data.name;
                            shtml += '</div>';
                            return shtml;
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#46bee9',
                            textStyle: {
                                fontSize: 1
                            }
                        }
                    },
                    data: geoArray
                },
                {
                    name: item[2],
                    type: 'lines',
                    zlevel: 2,
                    coordinateSystem: 'bmap',
                    effect: {
                        show: true,
                        period: 3, //箭头指向速度，值越小速度越快
                        trailLength: 0.05, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标
                        symbolSize: 5 //图标大小
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (obj) {
                            var shtml = '';
                            shtml += '<div style="solid rgba(255,255,255,.3); font-size: 13px;">';
                            shtml += obj.data.fromName + '  至  ' + obj.data.toName;
                            shtml += '</div>';
                            return shtml;
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: '#F8CC31',
                            width: 3, //尾迹线条宽度
                            opacity: 0.001, //尾迹线条透明度
                            curveness: 0 //尾迹线条曲直度,
                        }
                    },
                    data: peiSongData
                }
            );
        });

        var dituOption = {
            backgroundColor: 'transparent',
            title: {
                left: 'center',
                textStyle: {
                    color: 'white'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            //此属性是作用是定义地图的样式
            bmap: {
                center: [120.268152,29.76381], //配送站的经纬坐标
                zoom: 12,
                roam: false, //缩放，平移控制
                mapStyle: {
                    'styleJson': [
                        {
                            'featureType': 'water',  //调整河流颜色
                            'elementType': 'all',
                            'stylers': {
                                'color': '#12273c'
                            }
                        },
                        {
                            'featureType': 'land',  //调整土地颜色
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#12273c'
                            }
                        },
                        {
                            'featureType': 'highway',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                        }
                        },
                        {
                            'featureType': 'arterial', //调整一些干道颜色
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#2f4459'
                            }
                        },
                        {
                            'featureType': 'arterial',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#0b3d51'
                            }
                        },
                        {
                            'featureType': 'local',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'railway',
                            'elementType': 'geometry.stroke',
                            'stylers': {
                                'color': '#08304b'
                            }
                        },
                        {
                            'featureType': 'subway',
                            'elementType': 'geometry',
                            'stylers': {
                                'lightness': -70
                            }
                        },
                        {
                            'featureType': 'building',     //调整建筑物颜色
                            'elementType': 'geometry.fill',
                            'stylers': {
                                'color': '#000000'
                            }
                        },
                        {
                            'featureType': 'all',  //调整所有标签的填充颜色
                            'elementType': 'labels.text.fill',
                            'stylers': {
                                'color': '#857f7f'
                            }
                        },
                        {
                            'featureType': 'all',   //调整所有的标签的边缘颜色
                            'elementType': 'labels.text.stroke',
                            'stylers': {
                                'color': '#000000',
                                'visibility': 'off'
                            }
                        },
                        {
                            'featureType': 'building',  //调整建筑物
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#022338'
                            }
                        },
                        {
                            'featureType': 'green',
                            'elementType': 'geometry',
                            'stylers': {
                                'color': '#062032'
                            }
                        },
                        {
                            'featureType': 'boundary', //边界
                            'elementType': 'all',
                            'stylers': {
                                'color': '#12273c'
                            }
                        },
                        {
                            'featureType': 'manmade',
                            'elementType': 'all',
                            'stylers': {
                                'color': '#12273c'
                            }
                        },
                        {
                            'featureType': 'label',
                            'elementType': 'all',
                            'stylers': {
                                'visibility': 'off'
                            }
                        }
                    ]
                }
            },
            series: series
        };
        dituChart.setOption(dituOption, true);
        //标注节点点击事件
        dituChart.on('click', function (params) {
            var schoolName = params.name;
            //营养摄入对比
            $.ajax({
                url: '/datav/statNutritionCompareList?type=[[${type}]]&search_EQ_customerName=' + schoolName,
                type: "GET",
                success: function (reply) {
                    initYysrdbChart(reply);
                }
            });

            //菜谱推荐异步载入
            $("#recommendMenu_title").text("今日订单");
            $("#recommendMenu_table").load('/datav/statRecommendedMenuList?type=today&search_EQ_customerName=' + schoolName);
        });

        var bmap = dituChart.getModel().getComponent('bmap').getBMap();


        ////隐藏多余的地图切换器 添加控件和比例尺
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
//        var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
        bmap.addControl(top_left_navigation);
//        bmap.addControl(top_right_navigation);
    }
});

function statMaterialStructure_pre(obj) {
    var currentPage = $("#statMaterialStructure_currentPage").val();
    currentPage--;
    if (currentPage > 0) {
        $(obj).next().show();
        initScjgChart(currentPage);
        $("#statMaterialStructure_currentPage").val(currentPage);
        if (currentPage == 1) {
            $(obj).hide();
        }
    }
}

function statMaterialStructure_next(obj) {
    var currentPage = $("#statMaterialStructure_currentPage").val();
    var totalPage = $("#statMaterialStructure_totalPage").val();
    currentPage++;
    if (currentPage <= totalPage) {
        $(obj).prev().show();
        initScjgChart(currentPage);
        $("#statMaterialStructure_currentPage").val(currentPage);
        if (currentPage == totalPage) {
            $(obj).hide();
        }
    }
}

//食材结构分页查询数据
function initScjgChart(currentPage) {
    $.ajax({
        url: '/datav/statMaterialStructureList?type=[[${type}]]&currentPage=' + currentPage,
        type: "GET",
        success: function (reply) {
            var customerArray = [];
            var scjgMeatArray = [];
            var scjgVegetablesArray = [];
            var scjgAquaticProductsArray = [];
            $.each(reply, function () {
                var obj = $(this)[0];
                customerArray.push(obj.customerId);
                scjgMeatArray.push(obj.meat);
                scjgVegetablesArray.push(obj.vegetables);
                scjgAquaticProductsArray.push(obj.aquaticProducts);
            });

            var scjgOption = {
                title: {
                    text: '食材结构',
                    left: 'center',
                    textStyle: {},
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {   
                    y: 'bottom',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 10,
                    data: ['肉类', '蔬菜', '水产']
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '8%',
                    top: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '单位（克）',
                    nameGap: 5,
                    nameRotate: 270,
                    axisLabel: {
                        interval: 0,//横轴信息全部显示
                        rotate: 30 //倾斜显示
                    }
                },
                yAxis: [
                    {
                        type: 'category',
                        data: customerArray,
                        axisLabel: {
                            interval: 0 //y横轴信息全部显示
                        }
                    },
                ],
                series: [
                    {
                        name: '肉类',
                        type: 'bar',
                        stack: '总量',
                        data: scjgMeatArray,
                        barWidth: 14
                    },
                    {
                        name: '蔬菜',
                        type: 'bar',
                        stack: '总量',
                        data: scjgVegetablesArray
                    },
                    {
                        name: '水产',
                        type: 'bar',
                        stack: '总量',
                        data: scjgAquaticProductsArray
                    }
                ]
            };
            scjgChart.setOption(scjgOption);
        }
    });
}

function statNutritionAnalysis_pre(obj) {
    var currentPage = $("#statNutritionAnalysis_currentPage").val();
    currentPage--;
    if (currentPage > 0) {
        $(obj).next().show();
        initYysrfxChart(currentPage);
        $("#statNutritionAnalysis_currentPage").val(currentPage);
        if (currentPage == 1) {
            $(obj).hide();
        }
    }
}

function statNutritionAnalysis_next(obj) {
    var currentPage = $("#statNutritionAnalysis_currentPage").val();
    var totalPage = $("#statNutritionAnalysis_totalPage").val();
    currentPage++;
    if (currentPage <= totalPage) {
        $(obj).prev().show();
        initYysrfxChart(currentPage);
        $("#statNutritionAnalysis_currentPage").val(currentPage);
        if (currentPage == totalPage) {
            $(obj).hide();
        }
    }
}

//营养数据分析分页查询
function initYysrfxChart(currentPage) {
    $.ajax({
        url: '/datav/statNutritionAnalysisList?type=[[${type}]]&currentPage=' + currentPage,
        type: "GET",
        success: function (reply) {
            var customerArray = [];
            var proteinArray = [];
            var fatArray = [];
            var sugarArray = [];
            var dietaryFiberArray = [];
            var traceElementArray = [];
            $.each(reply, function () {
                var obj = $(this)[0];
                customerArray.push(obj.customerId);
                proteinArray.push(obj.protein);
                fatArray.push(obj.fat);
                sugarArray.push(obj.sugar);
                dietaryFiberArray.push(obj.dietaryFiber);
                traceElementArray.push(obj.traceElement);
            });

            var yysrfxOption = {
                title: {
                    text: '营养摄入分析',
                    left: 'center',
                    textStyle: {},
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    y: 'bottom',
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 10,
                    data: ['蛋白质', '脂肪', '糖', '膳食纤维', '微量元素']
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '10%',
                    top: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    name: '单位（毫克）',
                    nameGap: 5,
                    nameRotate: 270,
                    axisLabel:{
                        interval:0,//横轴信息全部显示
                        rotate:30//倾斜显示
                    }
                },
                yAxis: {
                    type: 'category',
                    data: customerArray
                },
                series: [
                    {
                        name: '蛋白质',
                        type: 'bar',
                        stack: '总量',
                        data: proteinArray,
                        barWidth : 20
                    },
                    {
                        name: '脂肪',
                        type: 'bar',
                        stack: '总量',
                        data: fatArray
                    },
                    {
                        name: '糖',
                        type: 'bar',
                        stack: '总量',
                        data: sugarArray
                    },
                    {
                        name: '膳食纤维',
                        type: 'bar',
                        stack: '总量',
                        data: dietaryFiberArray
                    },
                    {
                        name: '微量元素',
                        type: 'bar',
                        stack: '总量',
                        data: traceElementArray
                    }
                ]
            };
            yysrfxChart.setOption(yysrfxOption);
        }
    });
}
/*]]>*/
</script>
</body>
</html>
